<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="装修预算">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="">
			<view class="zhuangxiu-bg"></view>
			<view class="zhuangxiu-zaojia">
				<view class="jianfang-w">
					<view class="d-flex align-items">
						<view class="cs">所在城市</view>
						<view class="righttx d-flex align-items" @click="chooseCity">
							<view class="top-txt">{{adress}}</view>
							<image class="qm" src="../static/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items">
						<view class="cs">户 &nbsp;&nbsp;&nbsp;&nbsp; 型</view>
						<view class="jiegou">
							<uni-data-select v-model="value" :localdata="range" @change="change"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items">
						<view class="cs">{{value == 3 ? '占地面积' : '房屋面积'}}</view>
						<input type="text" class="miankuan" v-model="mianji" />
						<view class="cs-m">m²</view>
					</view>
					<view class="margin-top-30 d-flex align-items" v-if="value == 3">
						<view class="cs">屋顶形式</view>
						<view class="jiegou">
							<uni-data-select v-model="wuding" :localdata="range_wuding" @change="change_wuding"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items" v-if="value == 3">
						<view class="cs">外部精装</view>
						<view class="jiegou">
							<uni-data-select v-model="jingzhuang" :localdata="range_jingzhuang"
								@change="change_jingzhuang" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items" v-if="value == 3">
						<view class="cs">系统门窗</view>
						<view class="jiegou">
							<uni-data-select v-model="menchuang" :localdata="range_menchuang" @change="change_menchuang"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items" v-if="value == 3 || value == 4">
						<view class="cs">房屋层数</view>
						<view class="jiegou">
							<uni-data-select v-model="cengshu" :localdata="range_cengshu" @change="change_cengshu"
								:clear="false"></uni-data-select>
						</view>
					</view>

					<view class="margin-top-30 d-flex align-items">
						<view class="cs">手机号码</view>
						<input type="text" class="_phone" v-model="phone" />
					</view>
					<view class="liji-btn">
						<u-button color="#FF6400" @click="get_zaojia" text="立即获取"></u-button>
					</view>
					<!-- 获取造价弹窗 -->
					<view class="">
						<u-popup :show="show_zaojia" mode="left" :round="10" @close="close">
							<view class="zaojia-bg">
								<view class="zaojia-tit">造价估算金额</view>
								<view class="" style="width: 710rpx;margin: auto;">
									<view class="d-flex">
										<view class="dangci_w">档次</view>
										<view class="banbao_w">半包</view>
										<view class="banbao_w">全包</view>
									</view>
									<view class="d-flex margin-top-30">
										<view class="dangci_w">
											<view class="dangci_t">简单装修：</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[0].shijiyusuan}} ~ {{dangci_list[1].shijiyusuan}}万</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[6].shijiyusuan}} ~ {{dangci_list[7].shijiyusuan}}万</view>
										</view>
									</view>
									<view class="d-flex margin-top-30">
										<view class="dangci_w">
											<view class="dangci_t">中等装修：</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[2].shijiyusuan}} ~ {{dangci_list[3].shijiyusuan}}万</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[8].shijiyusuan}} ~ {{dangci_list[9].shijiyusuan}}万</view>
										</view>
									</view>
									<view class="d-flex margin-top-30">
										<view class="dangci_w">
											<view class="dangci_t">高端装修：</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[4].shijiyusuan}} ~ {{dangci_list[5].shijiyusuan}}万</view>
										</view>
										<view class="banbao_w">
											<view class="dangci_t">{{dangci_list[10].shijiyusuan}} ~ {{dangci_list[11].shijiyusuan}}万</view>
										</view>
									</view>
								</view>
								<!-- <view class="zaojia-num">{{jine_num}}</view>
								<view class="chayi">不同地域人、材、机有差异</view> -->
								<view class="zj-qr">
									<u-button color="#FF6400" @click="queren" text="确认"></u-button>
								</view>
								<view class="cankao">
									{{shuoming.banbao}}</br>
									{{shuoming.quanbaoinstr}}</br>
									{{shuoming.jiandan}}</br>
									{{shuoming.pinzhi}}</br>
									{{shuoming.shehua}}
								</view>
							</view>
						</u-popup>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="showcity" ref="uPicker" @cancel="cancel" :columns="columns" @confirm="confirm"
			@change="changeHandler" keyName="t_name"></u-picker>
	</view>
</template>

<script>
	import {
		tree
	} from '@/api/citys.js'
	import {
		getshejiyusuan,
		gethuxing,
		getBieshuwuding,
		getBieshujingzhaung,
		getBieshumenchuang,
		getBieshuceng,
		index
	} from '@/api/user.js'
	export default {
		data() {
			return {
				showcity: false,
				adress: '请选择省/市',
				shengname: '',
				cityname: '',
				shiname: '',
				columns: [],
				quname: '',
				shengid: '',
				shiid: '',
				dangci_list:[],
				quid: '',
				phone: '',
				mianji: '',
				value: 0,
				range: [{
					value: 0,
					text: "请选择"
				}],
				wuding: 0,
				range_wuding: [{
					wuding: 0,
					text: "砖混结构"
				}],
				jingzhuang: 0,
				range_jingzhuang: [{
					jingzhuang: 0,
					text: "砖混结构"
				}],
				menchuang: 0,
				range_menchuang: [{
					menchuang: 0,
					text: "砖混结构"
				}],
				cengshu: 0,
				range_cengshu: [{
					cengshu: 0,
					text: "砖混结构"
				}],
				show_zaojia: false,
				jine_num: '',
				shuoming:{},
			}
		},
		async onLoad() {
			await this.getProvinces()
			this.gethuxing()
			this.bieshu_wuding()
			this.bieshu_menchuang()
			this.bieshu_jingzhuang()
			this.bieshu_cengshu()
			this.getindex()
		},
		methods: {
			getindex(){
				index({}).then(res => {
					console.log("index接口",res);
					if(res.code == 1){
						this.shuoming = res.data.xieyi
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 选择结构形式
			change(e) {
				console.log("e:", e);
				this.value = e
			},
			// 选择外部精装
			change_jingzhuang(e) {
				this.jingzhuang = e
			},
			// 选择系统门窗
			change_menchuang(e) {
				this.menchuang = e
			},
			// 选择房屋层数
			change_cengshu(e) {
				this.cengshu = e
			},
			// 选择城市
			chooseCity() {
				console.log("eeeee", this.columns);
				this.showcity = true
			},
			// 选择屋顶形式
			change_wuding(e) {
				console.log("fdsafdsafdas", e)
				this.wuding = e
			},
			// 获取户型
			gethuxing() {
				gethuxing({}).then(res => {
					console.log("获取户型", res);
					if (res.code == 1) {
						let a = []
						for (let s of res.data.huxing_list) {
							a.push({
								value: s.id,
								text: s.name
							})
						}
						this.range = a
					}
				})
			},
			// 获取别墅屋顶形式
			bieshu_wuding(){
				getBieshuwuding({}).then(res => {
					console.log("获取别墅屋顶形式",res);
					if (res.code == 1) {
						let a = []
						for (let s of res.data.bieshuwuding_list) {
							a.push({
								value: s.id,
								text: s.name
							})
						}
						this.range_wuding = a
					}
				})
			},
			// 获取别墅门窗形式
			bieshu_menchuang(){
				getBieshumenchuang({}).then(res => {
					console.log("获取别墅屋顶形式",res);
					if (res.code == 1) {
						let a = []
						for (let s of res.data.bieshumenchuang_list) {
							a.push({
								value: s.id,
								text: s.name
							})
						}
						this.range_menchuang = a
					}
				})
			},
			// 获取别墅精装
			bieshu_jingzhuang(){
				getBieshujingzhaung({}).then(res => {
					console.log("获取别墅屋顶形式",res);
					if (res.code == 1) {
						let a = []
						for (let s of res.data.ieshujingzhuang_list) {
							a.push({
								value: s.id,
								text: s.name
							})
						}
						this.range_jingzhuang = a
					}
				})
			},
			// 获取别墅层数
			bieshu_cengshu(){
				getBieshuceng({}).then(res => {
					console.log("获取别墅屋顶形式",res);
					if (res.code == 1) {
						let a = []
						for (let s of res.data.bieshuceng_list) {
							a.push({
								value: s.id,
								text: s.name
							})
						}
						this.range_cengshu = a
					}
				})
			},
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns[0][index].children)
					picker.setColumnValues(2, this.columns[0][index].children[0].children)
				}
				if (columnIndex === 1) {
					console.log(e, indexs);
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columns[0][indexs[0]].children[indexs[1]].children)
				}
				console.log("columnIndex", columnIndex);
			},
			confirm(e) {
				console.log("点击确认城市", e);
				this.shengname = e.value[0].name
				this.cityname = e.value[1].name
				this.shiname = e.value[2].name
				this.shengid = e.value[0].id
				this.shiid = e.value[1].id
				this.quid = e.value[2].id
				this.adress = this.shengname + '/' + this.cityname + '/' + this.shiname
				this.showcity = false
			},
			cancel(e) {
				this.showcity = false
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns[0] = res.data
						this.columns[1] = res.data[0].children
						this.columns[2] = res.data[0].children[0].children
					}
				})
			},
			// 立即获取工程造价
			get_zaojia() {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录后查看',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500)
					return
				}
				var data = {
					huxing_id: this.value,
					mianji: this.mianji,
					province_id: this.shengid,
					city_id: this.shiid,
					area_id: this.quid,
					bieshuwudingwuding_id:this.wuding,
					bieshujingzhuang_id:this.jingzhuang,
					bieshumenchuang_id:this.menchuang,
					bieshuceng_id:this.cengshu,
					shoujihao: this.phone
				}
				getshejiyusuan(data).then(res => {
					console.log("获取装修预算", res);
					this.show_zaojia = true
					if (res.code == 1) {
						this.dangci_list = res.data.shijiyusuan
					}
				})
			},
			close() {
				this.show_zaojia = false
			},
			queren() {
				this.show_zaojia = false
			},
		}
	}
</script>

<style>
	.dangci_t{
		font-size: 28rpx;
		color: #666;
		font-weight: 600;
		text-align: center;
	}
	.banbao_w{
		width: 40%;
		font-size: 32rpx;
		color: #666;
		font-weight: 600;
		text-align: center;
	}
	.dangci_w{
		width: 30%;
		font-size: 32rpx;
		color: #666;
		font-weight: 600;
		text-align: center;
	}
	.chayi {
		font-size: 30rpx;
		font-weight: normal;
		text-align: center;
		color: #7A7A7A;
		margin-bottom: 20rpx;
	}

	.cankao {
		width: 650rpx;
		margin: 20rpx auto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 56rpx;
		/* text-align: center; */
		color: #7A7A7A;
	}

	.zj-qr {
		width: 480rpx;
		margin: auto;
		margin-top: 40rpx;
	}

	.zaojia-num {
		font-size: 64rpx;
		font-weight: 700;
		color: #FF6400;
		text-align: center;
		margin-top: 80rpx;
	}

	.zaojia-tit {
		font-size: 40rpx;
		font-weight: 600;
		color: #232323;
		text-align: center;
		padding-top: 80rpx;
		margin-bottom: 50rpx;
	}

	.zaojia-bg {
		width: 750rpx;
		/* height: 574rpx; */
		/* background: url('https://lianfan.nccpu.cn/image/bg_baojia.png') no-repeat #fff; */
		background: #fff;
		border-radius: 20rpx;
		/* background-size: 100% auto; */
	}

	.liji-btn {
		width: 580rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.jiegou {
		width: 510rpx;
		height: 74rpx;
		margin: 0 16rpx;
	}

	._phone {
		width: 455rpx;
		height: 76rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding-left: 20rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin: 0 16rpx;
	}

	.miankuan {
		width: 432rpx;
		height: 76rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding-left: 20rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin: 0 16rpx;
	}

	.jianfang-w {
		width: 630rpx;
		margin: auto;
	}

	.cs-m {
		font-size: 30rpx;
		color: #333333;
	}

	.cs {
		width: 128rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.righttx {
		width: 470rpx;
		height: 74rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin-left: 16rpx;
	}

	.qm {
		width: 18rpx;
		display: block;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
	}

	.top-txt {
		width: 455rpx;
		font-size: 24rpx;
		color: #333333;
		padding-left: 10rpx;
	}

	.zhuangxiu-zaojia {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: auto;
		margin-top: -60rpx;
		padding: 40rpx 0rpx;
	}

	.zhuangxiu-bg {
		width: 100%;
		height: 379rpx;
		background: url('https://lianfan.nccpu.cn/image/zhuangxiu.png') no-repeat;
		background-size: 100% auto;
	}

	page {
		background-color: #F7F8FB;
	}
</style>